<template>
  <treeselect
    :value="value"
    :options="options"
    :disabled="disabled"
    :placeholder="placeholder"
    :show-count="true"
    :disable-branch-nodes="disableBranchNodes"
    :normalizer="normalizer"
    @input="valueChanged"
    @select="selectd"
    :clearable="clearable"
  ></treeselect>
</template>

<script>
import { getDeptTreeApi } from "@/api/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "DeptSelect",
  props: {
    value: {
      type: Number,
      default: undefined,
    },
    placeholder: {
      type: String,
      default: "请选择部门",
    },
    onlyCompany: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    disableBranchNodes: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      options: [],
    };
  },
  created() {
    this.getListDeptTree();
  },
  methods: {
    normalizer(node) {
      if (this.onlyCompany && node.deptType === 0 && node.pId !== 0) {
        delete node.children;
      }
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.deptName,
        children: node.children,
      };
    },
    async getListDeptTree() {
      const { code, data } = await getDeptTreeApi();
      if (code !== 200) return;
      this.options = data;
    },

    valueChanged(value) {
      this.$emit("update:value", value);
    },
    selectd(node) {
      this.$emit("getDeptDetailData", node);
    },
  },
  components: {
    Treeselect,
  },
};
</script>

<style scoped lang="scss">
</style>
